<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head th:replace="~{commons/adminCommon::adminHead('西安旅游电子票务后台')}">
        <title>西安旅游电子票务后台</title>
    </head>

    <body>
        <nav th:replace="~{commons/adminCommon::navHead}"></nav>

        <div class="container-fluid">
            <div class="row">
                <nav th:replace="~{commons/adminCommon::navbar(3)}"></nav>

                <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
                    <h2>用户管理</h2>
                    <hr>
                    <div class="row m-3">
                        <div class="col">
                            <a th:href="@{/admin/users}" href="#"
                               class="btn btn-primary btn-sm mb-1">显示全部用户信息</a>
                            <form th:action="@{/admin/user/search}" method="get"
                                  class="form-inline d-inline-block float-right">
                                <input type="text" class="form-control-sm" name="name" placeholder="请输入用户姓名">
                                <input type="submit" value="搜索用户" class="btn btn-info btn-sm mb-1"/>
                            </form>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>用户ID</th>
                                    <th>昵称</th>
                                    <th>真实姓名</th>
                                    <th>邮箱</th>
                                    <th>手机号</th>
                                    <th>身份证号</th>
                                    <th>生日</th>
                                    <th>性别</th>
                                    <th>类型</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:each="user, stat : ${userPage.records}">
                                    <td th:text="${stat.index + 1}">1</td>
                                    <td th:text="${user.userId}">1</td>
                                    <td th:text="${user.userNickname}">阿骏</td>
                                    <td th:text="${user.userRealName}">李哥</td>
                                    <td th:text="${user.userEmail}">lige@qq.com</td>
                                    <td th:text="${user.userPhone}">12345678911</td>
                                    <td th:text="${user.userIdCard}">612828199912260231</td>
                                    <td th:text="${user.userBirth}">1999-01-05</td>
                                    <td th:text="${user.admin} ? '管理员' : '普通用户'">
                                        普通用户
                                    </td>
                                    <td th:text="${user.userSex} ? '男' : '女'">男</td>
                                    <td>
                                        <button class="btn btn-primary btn-sm" data-toggle='modal'
                                                data-target='#edit-user-modal' th:data-userid='${user.userId}'>
                                            编辑
                                        </button>
                                        <button th:onclick="deleteUser([[${user.userId}]])"
                                                class="btn btn-danger btn-sm">
                                            删除
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <h3 th:if="${userPage.records.isEmpty()}" th:text="${searchMsg}"
                            class="text-danger text-center"></h3>
                        <nav aria-label="Page navigation example" class="mt-3 float-right"
                             th:object="${userPage}" th:if="${userPage.pages > 1}">
                            <ul class="pagination">
                                <li class="page-item" th:classappend="*{!hasPrevious()} ? 'disabled' : ''">
                                    <a class="page-link" th:href="@{/admin/users(page=1)}" aria-label="Previous">首页</a>
                                </li>
                                <li class="page-item" th:classappend="*{hasPrevious()} ? '' : 'disabled'">
                                    <a class="page-link" th:if="*{(current - 1) > 0}"
                                       th:href="@{/admin/users(page=*{current}-1)}"
                                       aria-label="Previous">上一页</a>
                                    <a class="page-link" th:if="*{(current - 1) <= 0}" th:href="@{/admin/users(page=1)}"
                                       aria-label="Previous">上一页</a>
                                </li>
                                <li class="page-item" th:each="page : *{#numbers.sequence(1, pages)}"
                                    th:classappend="(${page}==*{current})?'active':''">
                                    <a class="page-link" th:href="@{/admin/users(page=${page})}" th:text="${page}">1</a>
                                </li>
                                <li class="page-item" th:classappend="*{hasNext()} ? '' : 'disabled'">
                                    <a class="page-link" th:if="*{(current + 1) < pages}"
                                       th:href="@{/admin/users(page=*{current}+1)}"
                                       aria-label="Previous">下一页</a>
                                    <a class="page-link" th:if="*{(current + 1) >= pages}"
                                       th:href="@{/admin/users(page=*{pages})}"
                                       aria-label="Previous">下一页</a>
                                </li>
                                <li class="page-item" th:classappend="*{!hasNext()} ? 'disabled' : ''">
                                    <a class="page-link" th:href="@{/admin/users(page=*{pages})}"
                                       aria-label="Previous">末页</a>
                                </li>
                            </ul>
                            <div class="text-primary text-center">
                                <span>第 <span th:text="*{current}">1</span> 页</span>
                                /
                                <span>共 <span th:text="*{pages}">10</span> 页</span>
                            </div>
                        </nav>
                    </div>
                </main>
            </div>
        </div>

        <!-- 修改用户信息模态框 -->
        <div id='edit-user-modal' class='modal fade' tabindex='-1' role='dialog' aria-labelledby='my-modal-label'>
            <div class='modal-dialog modal-lg' role='document' aria-hidden='true'>
                <div class='modal-content'>
                    <div class='modal-header'>
                        <h3 id='my-modal-label' class='modal-title text-primary'>修改用户信息</h3>
                    </div>
                    <div class='modal-body'>
                        <div class="form-group row">
                            <label for="userRealName" class="col-form-label col-sm-2">昵称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="userNickname" name="userNickname"
                                       placeholder="请输入昵称">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="userRealName" class="col-form-label col-sm-2">姓名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="userRealName" name="userRealName"
                                       placeholder="请输入真实姓名">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="userEmail" class="col-form-label col-sm-2">邮箱</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="userEmail" name="userEmail"
                                       placeholder="请输入邮箱">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="userPhone" class="col-form-label col-sm-2">手机号</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="userPhone" name="userPhone"
                                       placeholder="请输入手机号">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="userIdCard" class="col-form-label col-sm-2">身份证号</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="userIdCard" name="userIdCard"
                                       placeholder="请输入身份证号">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="userBirth" class="col-form-label col-sm-2">生日</label>
                            <div class="col-sm-10">
                                <input type="date" class="form-control" id="userBirth" name="userBirth">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="userSex" class="col-form-label col-sm-2">性别</label>
                            <div class="col-sm-10">
                                <input type="radio" id="userSex" class="mt-2" name="userSex" value="1" checked
                                       style="width: 15px; height: 15px"> 男
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <input type="radio" name="userSex" class="mt-2" value="0"
                                       style="width: 15px; height: 15px"> 女
                            </div>
                        </div>
                    </div>
                    <div class='modal-footer'>
                        <button id="cancelModelBtn" type='button' class='btn btn-danger' data-dismiss='modal'>
                            取消
                        </button>
                        <button id='editUserBtn' type='button' class='btn btn-primary'>
                            修改
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <th:block th:replace="~{commons/adminCommon::commonJs}"/>
        <script th:inline="javascript">
            $('#edit-user-modal').on('show.bs.modal', function (event) {
                let button = $(event.relatedTarget)
                let userid = button.data('userid')
                let modal = $(this);
                modal.find('.modal-title').text('修改用户信息 ID => ' + userid);
                document.getElementById('editUserBtn').onclick = function () {
                    editUser(userid);
                };

                // ajax
                let req = {};
                req.userId = userid;
                $.ajax({
                    url: /*[[@{/admin/user/findUserById.do}]]*/'',
                    method: 'POST',
                    dataType: 'json',
                    data: JSON.stringify(req),
                    contentType: 'application/json;charset=utf-8',
                    processData: false,
                    success: function (resp) {
                        if (resp.success) {
                            let user = resp.data;
                            modal.find('.modal-body #userNickname').val(user.userNickname);
                            modal.find('.modal-body #userRealName').val(user.userRealName);
                            modal.find('.modal-body #userEmail').val(user.userEmail);
                            modal.find('.modal-body #userPhone').val(user.userPhone);
                            modal.find('.modal-body #userIdCard').val(user.userIdCard);
                            modal.find('.modal-body #userBirth').val(user.userBirth);
                        } else {
                            bootstrapQ.msg({msg: resp.message, type: 'warning', time: 3000});
                        }
                    },
                    error: function (error) {
                        bootstrapQ.msg({msg: "网络异常 => " + error, type: 'danger', time: 3000});
                    }
                })
            })

            // 编辑用户
            function editUser(userid) {
                let req = {};
                req.userId = userid;
                req.userNickname = $('#userNickname').val().trim();
                req.userRealName = $('#userRealName').val().trim();
                req.userEmail = $('#userEmail').val().trim();
                req.userPhone = $('#userPhone').val().trim();
                req.userIdCard = $('#userIdCard').val().trim();
                req.userBirth = $('#userBirth').val().trim();
                req.userSex = $('#userSex').val().trim();

                $.ajax({
                    url: /*[[@{/admin/user/updateUser.do}]]*/'',
                    method: 'POST',
                    dataType: 'json',
                    data: JSON.stringify(req),
                    contentType: 'application/json;charset=utf-8',
                    processData: false,
                    success: function (resp) {
                        if (resp.success) {
                            bootstrapQ.alert(resp.message, function () {
                                location.reload();
                            });
                        } else {
                            bootstrapQ.msg({msg: resp.message, type: 'warning', time: 3000});
                        }
                    },
                    error: function (error) {
                        bootstrapQ.msg({msg: "网络异常 => " + error, type: 'danger', time: 3000});
                    }
                })
            }

            // 删除用户
            function deleteUser(userId) {
                bootstrapQ.confirm({title: "警告", msg: '此操作将永久删除此用户，确认删除?'},
                    function () {
                        let req = {};
                        req.userId = userId;
                        $.ajax({
                            url: /*[[@{/admin/user/deleteUser.do}]]*/'',
                            method: 'POST',
                            dataType: 'json',
                            data: JSON.stringify(req),
                            contentType: 'application/json;charset=utf-8',
                            processData: false,
                            success: function (resp) {
                                if (resp.success) {
                                    alert(resp.message);
                                    location.reload();
                                } else {
                                    bootstrapQ.msg({msg: resp.message, type: 'warning', time: 3000});
                                }
                            },
                            error: function (error) {
                                bootstrapQ.msg({msg: "网络异常 => " + error, type: 'danger', time: 3000});
                            }
                        })
                    }
                );
            }
        </script>
    </body>
</html>